<template>
    <div id="e800tDataView" :class="{ full: fullscreen }">
        <!-- <breadcrumb :data="breadList" v-if="!fullscreen"></breadcrumb> -->
        <div class="canvas" ref="adaptive" id="adaptive" :style="{
            background: sceneBgColor
        }" :class="{
                fixed: fullscreen
            }">
            <div id="adaptiveBg" refs="adaptiveBg" :style="{ transform: `scale(${layerScale}, ${layerScale})` }">
                <e800t-line-svg @dataChange="dataChange" ref="e800t" :viewMode="viewMode" :color="lineColor"
                    :bgColor="sceneBgColor" :msgTxtColor="msgTxtColor"
                    :componentColor="viewMode === 1 ? lineColor : '#ff0000'" :width="1520" :height="860" />
            </div>
        </div>
        <div class="control">
            <!-- <div class="status">
                <span :style="{ color: fontColor }">连接状态：</span>
                <div class="icon icon-success" v-if="linkStatus"></div>
                <div class="icon icon-error" v-else></div>
            </div> -->
            <!-- <div class="status">
                <div class="mode-view" v-if="viewMode === 1">浏览模式</div>
                <div class="mode-test" v-if="viewMode === 2">测试模式</div>
            </div> -->
            <div class="title">{{ stationName }}</div>
            <div class="btn">
                <el-button type="text" class="text">{{ layerScale.toFixed(2) }}X</el-button>
                <!-- <el-button icon="el-icon-set-up" @click="openConfigModal">载入方案</el-button>
                <el-button icon="el-icon-connection" v-if="viewMode === 1" @click="changeViewMode(2)">测试模式</el-button>
                <el-button icon="el-icon-monitor" v-if="viewMode === 2" @click="changeViewMode(1)">浏览模式</el-button> -->
                <el-button icon="setting" @click="modalShow = true">控制面板</el-button>
                <!-- <el-button icon="el-icon-full-screen" @click="handleFullScreen">全屏切换</el-button> -->
            </div>
            <div class="test-btn" v-if="viewMode === 2">
                <div class="label">测试名称：</div>
                <el-input class="input" v-model="reportDesc" @input="dataChange" placeholder="请输入"></el-input>
                <div class="label">测试类型：</div>
                <el-select class="input" v-model="testDevTypeVal" @change="dataChange" placeholder="请选择">
                    <el-option v-for="item in testDevTypeList" :key="item.value" :label="item.label"
                        :value="item.value"> </el-option>
                </el-select>
                <div class="label">导通角度：</div>
                <el-input class="input" type="number" v-model="testAngle" @input="dataChange"
                    placeholder="请输入"></el-input>
                <div class="label">导通时长：</div>
                <el-input class="input" type="number" v-model="testTime" @input="dataChange"
                    placeholder="请输入"></el-input>
                <el-button type="warning" class="prepare"
                    @click="sendCmd('test_platform_prepare', 144)">预备执行</el-button>
                <el-button type="danger" class="start" :disabled="!canStart"
                    @click="sendCmd('test_platform_execute', 145)">测试开始</el-button>
            </div>
            <div class="test-lable" v-if="viewMode === 2">
                <div class="label">{{ exetLabelTxt }}</div>
            </div>
        </div>

        <div class="alarm" v-if="alarmShow" @click="$router.push('/alarm')">
            <!-- <img class="alarm-icon" src="@/assets/img/dangerous.png" alt="" /> -->
            {{ alarmText }}
            <div class="alarm-close el-icon-close" @click.stop="alarmShow = false"></div>
        </div>

        <div class="footer" v-show="viewMode === 1">
            <div class="date" v-if="nowDate">当前时间：{{ nowDate }}</div>
        </div>

        <modal title="配置方案选择" v-model="configModalShow" :showConfirm="false" :showCancel="false"
            @closed="configModalShow = false" width="1050px">
            <el-table ref="e800tConfigListForm" size="medium" header-cell-class-name="black-table"
                :data="e800tPreConfigList" style="width: 100%" border stripe>
                <el-table-column prop="name" label="方案名" align="center"> </el-table-column>
                <el-table-column prop="devCode" label="设备编号" align="center"> </el-table-column>
                <el-table-column prop="testDevType" label="测试设备类型" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.testDevType | filterCommon(testDevType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="pt" label="PT选择" align="center"> </el-table-column>
                <el-table-column prop="ct" label="CT选择" align="center"> </el-table-column>
                <el-table-column prop="switch" label="开关选择" align="center"> </el-table-column>
                <el-table-column prop="devCode" label="操作" align="center" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" class="start" @click="setConfigData(scope.row)">选择</el-button>
                        <el-button type="text" class="table-error-btn"
                            @click="delConfigData(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </modal>

        <modal title="添加方案" v-model="addConfigModal" @confirm="addConfig" @closed="addConfigModal = false"
            width="450px">
            <el-form ref="configForm" label-width="120px" label-position="right" label-suffix=":" :model="configForm"
                :rules="configFormRules" :inline="true">
                <el-form-item prop="name" label="方案名称">
                    <el-input v-model="configForm.name" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
        </modal>

        <modal title="控制面板" v-model="modalShow" @confirm="updateSetting" @closed="modalShow = false" width="750px">
            <el-form ref="settingForm" label-width="120px" label-position="right" label-suffix=":" :model="settingForm"
                :inline="true">
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="sceneBgColor" label="背景颜色">
                            <el-color-picker v-model="settingForm.sceneBgColor"> </el-color-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="lineColor" label="线路颜色">
                            <el-color-picker v-model="settingForm.lineColor"> </el-color-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="msgTxtColor" label="消息字体颜色">
                            <el-color-picker v-model="settingForm.msgTxtColor"> </el-color-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </modal>
    </div>
</template>

<script>
import Breadcrumb from '@/components/cloudTv/Breadcrumb'
import E800tLineSvg from '@/components/cloudTv/E800tLineSvg'
import Modal from '@/components/cloudTv/Modal'
import { faultType, testDevType } from '@/utils/type'
import { filterTime } from '@/utils/filterTime'
import $ from 'jquery'
export default {
    name: 'e800tDataView',
    data() {
        return {
            breadList: [
                {
                    name: '企业管理'
                },
                {
                    name: '监测站管理',
                    url: '/stationList'
                },
                {
                    name: '实验站总览'
                }
            ],
            faultType,
            testDevType,
            settingForm: {
                // 控制面板配置项
                lineColor: '#d9a116',
                sceneBgColor: '#212120',
                msgTxtColor: '#00CC33'
            },
            configForm: {
                name: ''
            },
            configFormRules: {
                name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }]
            },
            modalShow: false, // 设置弹窗
            configModalShow: false, // 800t配置命令的弹窗
            lineColor: '#d9a116', // 线路颜色
            sceneBgColor: '#212120', // 背景颜色
            msgTxtColor: '#00CC33', // 消息字体颜色
            fontColor: '#ffffff', // 字体颜色
            linkStatus: 0, // 连接状态
            fullscreen: false, // 是否全屏
            alarmShow: false, // 报警弹窗
            alarmText: '', // 报警内容
            viewMode: 1, // 1浏览模式 2线路模式
            stationConfig: {}, // 站点显示配置
            reportDesc: '', // 测试名称
            testAngle: '', // 导通角度
            testTime: '', // 导通时长
            testDevTypeVal: '', // 测试设备类型
            canStart: false, // 是否可执行
            testDevTypeList: testDevType, // 测试设备类型列表
            layerScale: 1, // 页面缩放大小
            stationName: '', // 站点名称
            entId: '', // 企业名称
            nowDate: '', // 当前时间
            xNow: 0, // 当前鼠标X点
            yNow: 0, // 当前鼠标Y点
            e800tPreConfigList: [], // 方案列表
            configItem: {}, // 当前选择的方案
            curConfigData: {}, // 当前执行通过的配置项
            addConfigModal: false, // 添加方案弹窗
            total: 0,
            preButtonTimer: null, // 预备执行按钮有效期记时
            exetButtonTimer: null, // 执行按钮有效期记时
            preBtnCountDownSc: 0, // 预备执行点击后有效时间,默认五分钟
            exetBtnCountDownSc: 0, // 执行按钮倒计时秒数
            exetLabelTxt: '请点击上方“预备执行”按钮提交测试方案', // 给与用户的提示
            pageValue: {
                page: 1,
                size: 5
            }
        }
    },
    components: {
        Breadcrumb,
        Modal,
        E800tLineSvg,
    },
    beforeDestroy() {
        clearInterval(this.nowDateInterval)
        clearInterval(this.exetButtonTimer)
        clearInterval(this.preBtnCountDownSc)
    },
    mounted() {
        this.stationId = this.$route.query.id
        this.entId = this.$route.query.entId
        this.getWholeStruct()
        this.getStationConfig()
        this.getNowDate()
        this.layerEventBind()
        window.$ = $
    },
    methods: {
        // 获取站点数据
        getWholeStruct() {
            this.cloudTv_API.wholeStruct({
                stationId: this.stationId,
                liveDataFlag: 1,
            }).then(res => {
                if (res.status === 200 && res.data && res.data.masterLineList) {
                    this.devCode = res.data.lineDevList[0].devCode

                }
            });
        },
        // 打开配置方案弹窗
        openConfigModal() {
            this.getE800tPreConfig(1, () => {
                this.configModalShow = true
            })
        },
        // 获取方案列表
        getE800tPreConfig(clear, cb) {
            if (clear) {
                this.pageValue.page = 1
            }
            this.$post('/dev/config/getDevE800tConfigListByStationId?stationId=' + this.stationId + '&curPage=' + this.pageValue.page + '&pageSize=' + this.pageValue.size).then((res) => {
                if (res.status === 200 && res.data && res.data.records) {
                    // console.info('aaaa : ' + JSON.stringify(res.data.records))
                    res.data.records.forEach((item) => {
                        let ctData = JSON.parse(item.testCtJson)
                        let ptData = JSON.parse(item.testPtJson)
                        let switchData = JSON.parse(item.testSwitchList)
                        // console.info('CT ' + ctData)
                        item.ct = this.jsonToString('CT', ctData)
                        item.pt = this.jsonToString('PT', ptData)
                        item.switch = this.jsonToString('开关', switchData)
                    })
                    this.e800tPreConfigList = res.data.records
                    this.total = res.data.total
                    cb && cb()
                }
            })
        },
        // 配置json数据转文本
        jsonToString(name, json) {
            let str = ''
            if (name !== '开关') {
                for (let key in json) {
                    str += `${name}${key}选择了${json[key]};`
                }
            } else {
                str = name
                let keyList = []
                for (let key in json) {
                    keyList.push(key)
                }
                str += keyList.toString() + '闭合'
            }
            return str
        },
        // 载入方案数据
        setConfigData(item) {
            this.viewMode = 2
            this.configModalShow = false
            let obj = {
                pt: JSON.parse(item.testPtJson),
                ct: JSON.parse(item.testCtJson),
                switch: JSON.parse(item.testSwitchList)
            }
            this.configItem = {
                pt: obj.pt,
                ct: obj.ct,
                switchList: obj.switch,
                testDevType: item.testDevType,
                angle: item.testAngle,
                reportDesc: item.name,
                time: item.testTime
            }
            this.$refs.e800t.setFormData(obj, 'form')
            this.reportDesc = item.name
            this.testAngle = item.testAngle
            this.testTime = item.testTime
            this.testDevTypeVal = item.testDevType
            this.devCode = item.devCode

            console.log('方案载入 : ' + JSON.stringify(this.configItem))
            this.$message.success('方案载入成功')
        },
        // 删除方案
        delConfigData(id) {
            this.$confirm('确认删除该方案吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$post('/dev/config/delDevE800tConfigListById?configId=' + id, {
                        configId: id
                    }).then((res) => {
                        if (res.status === 200) {
                            this.getE800tPreConfig()
                            this.$message({
                                message: '删除成功！',
                                type: 'success'
                            })
                        }
                    })
                })
                .catch(() => { })
        },
        // 新增自定义方案
        addConfig() {
            this.$refs.configForm.validate((valid) => {
                if (valid) {
                    this.$post('/dev/config/saveDevE800tConfigListByStationId', {
                        stationId: this.stationId,
                        name: this.configForm.name,
                        devCode: this.devCode,
                        testDevType: this.curConfigData.testDevType,
                        testPtJson: JSON.stringify(this.curConfigData.pt),
                        testCtJson: JSON.stringify(this.curConfigData.ct),
                        testSwitchList: JSON.stringify(this.curConfigData.switchList),
                        testAngle: this.curConfigData.angle,
                        testTime: this.curConfigData.time
                    }).then((res) => {
                        if (res.status === 200) {
                            this.addConfigModal = false
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            })
                        }
                    })
                }
            })
        },
        // 预备执行
        sendCmd(type, cmdType) {
            if (this.reportDesc.toString() === '' || this.reportDesc === null || this.reportDesc.length > 50) {
                this.$message.error('请填写测试名称(50个字符以内)')
                return
            }
            if (this.testDevTypeVal === '' || this.testDevTypeVal === null) {
                this.$message.error('请选择测试类型')
                return
            }
            if (this.testAngle.toString() === '' || this.testAngle === null) {
                this.$message.error('请填写导通角度')
                return
            }
            if (this.testTime.toString() === '' || this.testTime === null) {
                this.$message.error('请填写导通时长')
                return
            }
            let formData = JSON.parse(JSON.stringify(this.$refs.e800t.form))
            // 删除空数据
            for (let i in formData) {
                for (let j in formData[i]) {
                    if (!formData[i][j]) {
                        delete formData[i][j]
                    }
                }
            }
            if (this.getFormDataLength(formData.pt) > 4) {
                this.$message.error('监测电压数量不能大于4个')
                return
            }
            if (this.getFormDataLength(formData.ct) > 4) {
                this.$message.error('监测电流数量不能大于4个')
                return
            }
            let params = {
                pt: formData.pt,
                ct: formData.ct,
                switchList: formData.switch,
                testDevType: this.testDevTypeVal,
                angle: this.testAngle,
                reportDesc: this.reportDesc,
                time: this.testTime
            }

            this.exetLabelTxt = '请点击上方“预备执行”按钮提交测试方案'

            console.log('configItem:' + JSON.stringify(this.configItem))
            console.log('params    :' + JSON.stringify(params))

            if (cmdType === 145) {
                this.exetBtnCountDownSc = 0
                console.log('提前终止倒计时' + this.exetBtnCountDownSc)
            } else if (cmdType === 144) {
                this.preBtnCountDownSc = 300
                this.preButtonTimer = setInterval(() => {
                    if (this.preBtnCountDownSc > 0) {
                        this.preBtnCountDownSc--
                    }
                    // console.log('倒计时计数:' + this.preBtnCountDownSc + ' & ' + this.exetBtnCountDownSc)
                    if (this.preBtnCountDownSc + this.exetBtnCountDownSc <= 0) {
                        // console.log(this.preBtnCountDownSc + this.exetBtnCountDownSc)
                        clearInterval(this.preButtonTimer)
                        this.exetLabelTxt = '请点击上方“预备执行”按钮提交测试方案'
                    }
                }, 1000)
            }
            console.log('cmdType:' + cmdType)
            this.$post('/dev/ctrl/sendCmd', {
                devCode: this.devCode,
                devUnityType: 'ERIC800T',
                type,
                cmdType,
                value: JSON.stringify(params)
            }).then((res) => {
                if (res.status === 202) {
                    if (cmdType === 144) {
                        this.exetLabelTxt = '预执行请求已发送，待现场安全员许可后方可执行，请等待'
                    } else {
                        this.$message.success('执行成功')
                    }
                }
            })
        },
        // 获取数据电压电流个数
        getFormDataLength(data) {
            let num = 0
            for (let key in data) {
                if (data[key]) {
                    data[key].split(',').forEach((item) => {
                        num++
                    })
                }
            }
            return num
        },
        // 电路配置项变更
        dataChange() {
            this.canStart = false
            console.info('dataChange : ' + JSON.stringify(this.configItem))
        },
        // 模式切换
        changeViewMode(val) {
            this.viewMode = val
            this.layerScale = 1
            this.$message.success('模式切换成功')
        },
        // 获取站点显示配置
        getStationConfig() {
            this.cloudTv_API.getById(this.stationId).then(res => {
                if (res.status === 200 && res.data && res.data.config && /^\{.+\}$/.test(res.data.config)) {
                    let config = JSON.parse(res.data.config)
                    if (config.lineColor === undefined) {
                        config.lineColor = '#d9a116'
                    }
                    if (config.sceneBgColor === undefined) {
                        config.sceneBgColor = '#212120'
                    }
                    if (config.msgTxtColor === undefined) {
                        config.msgTxtColor = '#00CC33'
                    }
                    this.lineColor = config.lineColor
                    this.sceneBgColor = config.sceneBgColor
                    this.msgTxtColor = config.msgTxtColor
                    console.log(config)
                    this.settingForm = config
                }
            });
        },
        // 获取当前时间
        getNowDate() {
            this.nowDateInterval = setInterval(() => {
                this.nowDate = filterTime(new Date().getTime(), 'yyyy-mm-dd hh:ff:ss')
            }, 1000)
        },
        // 背景事件绑定
        layerEventBind() {
            const adaptive = document.getElementById('adaptive')
            const adaptiveBg = document.getElementById('adaptiveBg')
            const _this = this
            // 滚轮缩放
            adaptive.addEventListener('mousewheel', (e) => {
                if (this.viewMode === 2) {
                    return
                }
                let wheel = e.wheelDelta || -e.detail
                let delta = Math.max(-1, Math.min(1, wheel))
                let layerScale = this.layerScale
                if (delta < 0) {
                    layerScale = layerScale - 0.05
                    layerScale = layerScale <= 0.1 ? 0.1 : layerScale
                }
                if (delta > 0) {
                    layerScale = layerScale + 0.05
                    layerScale = layerScale >= 3 ? 3 : layerScale
                }
                this.layerScale = layerScale
            })
            // 鼠标拖拽
            adaptive.onmousedown = function (e) {
                // 鼠标按下事件
                e = e || window.event // 事件对象
                var xDown = e.clientX // 鼠标按下X的坐标
                var yDown = e.clientY // 鼠标按下Y的坐标
                var leftDown = adaptiveBg.offsetLeft // 获取盒子的初始left值
                var topDown = adaptiveBg.offsetTop // 获取盒子的初始top值
                _this.xNow = 0
                _this.yNow = 0
                document.onmousemove = function (e) {
                    // 鼠标移动事件
                    e = e || window.event
                    var xMove = e.clientX // 鼠标移动X的坐标
                    var yMove = e.clientY // 鼠标移动Y的坐标
                    // 移动的坐标减去按下的坐标 = 移动的距离
                    _this.xNow = xMove - xDown
                    _this.yNow = yMove - yDown
                    // 赋值给left和top
                    adaptiveBg.style.top = topDown + _this.yNow + 'px'
                    adaptiveBg.style.left = leftDown + _this.xNow + 'px'
                }
                document.onmouseup = function () {
                    // 鼠标抬起事件
                    // 清除移动和抬起事件
                    this.onmousemove = this.onmouseup = null
                }
                return false // 阻止默认事件
            }

            if (!document.contains) {
                document.contains = document.documentElement.contains
            }
        },
        // 全屏切换
        handleFullScreen() {
            const _this = this
            const element = document.documentElement
            function fullScreen() {
                if (element.requestFullscreen) {
                    element.requestFullscreen()
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen()
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen()
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen()
                }
                _this.fullscreen = true
                console.log('已全屏！')
            }

            function exitFullScreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen()
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen()
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen()
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen()
                }
                console.log('已还原！')
                _this.fullscreen = false
            }
            if (document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement) {
                exitFullScreen()
            } else {
                fullScreen()
            }
        },
        // 修改配置
        updateSetting() {
            this.$post('/ent/ent-station/webConfig/save', {
                stationId: this.stationId,
                config: JSON.stringify(this.settingForm),
                entId: this.entId
            }).then((res) => {
                if (res.status === 200) {
                    this.lineColor = this.settingForm.lineColor
                    this.sceneBgColor = this.settingForm.sceneBgColor
                    this.msgTxtColor = this.settingForm.msgTxtColor
                    this.modalShow = false
                }
            })
        },
        // 跳转设备历史数据
        routeDeviceHistory(table) {
            if (Math.abs(this.xNow) > 5) {
                return
            }
            let devIds = []
            table.forEach((row) => {
                row.forEach((td) => {
                    if (td.devId) {
                        devIds.push(td.devId)
                    }
                })
            })
            if (/900|800/.test(table[0] && table[0][0] && table[0][0].text)) {
                this.$router.push(`/deviceHistroy?devType=0&id=${devIds[0]}`)
            } else {
                this.$router.push(`/deviceHistroy?devType=1&devIds=${devIds}`)
            }
        }
    },
    computed: {}
}
</script>

<style lang="scss">
.el-scrollbar__view {
    height: 100%;
}

@keyframes alarmShadow {
    0% {
        box-shadow: 0px 0px 6px #ff0000;
    }

    100% {
        box-shadow: 0px 0px 22px #ff0000;
    }
}

#e800tDataView {
    width: 100%;
    height: 100%;
    position: relative;

    &.full {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .canvas {
        width: 100%;
        height: calc(100% - 28px);
        background: #ffffff;

        &.hide {
            position: absolute;
            left: -9999px;
            top: -9999px;
        }
    }

    #adaptive {
        height: calc(100vh - 80px);
        width: 100%;
        position: relative;
        overflow: hidden;

        #adaptiveBg {
            position: absolute;
            top: 100px;
            left: 30px;
            width: calc(100% - 60px);
            height: calc(100% - 100px);
            display: flex;
            align-items: center;
            justify-content: center;

            &.nowrap {
                white-space: nowrap;
                overflow: visible;
            }
        }

        .branch-item {
            vertical-align: top;
            margin-bottom: 20px;
            display: inline-block;
            margin-top: 12px;

            .branch-content {
                width: 180px;
                position: relative;
                text-align: center;

                .branch-dot {
                    position: absolute;
                    left: calc(50% - 3px);
                    top: -4px;
                    width: 6px;
                    height: 6px;
                    background: #d9a116;
                    border-radius: 50%;
                }

                .branch-line {
                    display: inline-block;
                    height: 150px;
                    width: 2px;
                    background: #d9a116;
                }

                .branch-img {
                    width: 56px;
                    height: 56px;
                    position: absolute;
                    left: calc(50% - 28px);
                    top: 50px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .branch-name {
                    color: #fff;
                    margin-top: 2px;
                    margin-bottom: 14px;
                }

                .branch-master-name {
                    position: absolute;
                    right: 0;
                    top: -8px;
                    font-size: 12px;
                    transform: translateX(50%);
                    color: #ffffff;
                    padding: 1px 3px;
                    max-width: 76%;
                    z-index: 1;

                    &.right {
                        right: 0;
                    }

                    &.middle {
                        right: 50%;
                    }

                    &.none {
                        display: none;
                    }
                }
            }

            .branch-contact {
                width: 100px;
                height: 50px;
                margin-left: -10px;
                margin-right: -10px;
                border: 2px solid #007eff;
                border-top: none;
                margin-top: 2px;
                position: relative;
            }

            .branch-empty {
                width: 80px;
            }

            &.ERIC0800 .table-data td {
                white-space: nowrap;
            }

            .table-data {
                margin: 0 auto 14px auto;
                border-left: 1px solid #ccc;
                border-top: 1px solid #ccc;

                td {
                    text-align: center;
                    color: #fff;
                    min-width: 38px;
                    border-right: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    font-size: 12px;
                    padding: 2px 2px;
                    max-width: 60px;
                    word-break: break-word;

                    &.success {
                        color: #2ebd41 !important;
                    }

                    &.error {
                        color: #ff0000 !important;
                    }

                    &.warning {
                        color: #faad14 !important;
                    }
                }
            }
        }

        &.fixed {
            height: 100%;
        }
    }

    #canvasTable {
        position: absolute;

        // background: #ff0000;
        .table-wrap {
            position: absolute;
        }

        .table-data {
            transform: translate(-50%, 0);
            margin-bottom: 20px;
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;

            td {
                text-align: center;
                color: #fff;
                min-width: 38px;
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                font-size: 12px;
                padding: 2px 2px;
                max-width: 60px;

                &.error {
                    color: #ff0000;
                }

                &.warning {
                    color: #faad14;
                }
            }
        }
    }

    .control {
        position: absolute;
        top: 28px;
        left: 0;
        right: 0;
        line-height: 50px;
        color: #00CC33;
        font-size: 16px;
        text-align: center;

        .title {
            display: inline-block;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .status {
            position: absolute;
            left: 30px;
            top: 0;

            .icon {
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                border: 1px solid #fff;
            }

            span,
            .icon {
                vertical-align: middle;
            }

            .icon-success {
                background: #04a635;
            }

            .icon-error {
                background: #ca0003;
            }

            .mode-view {
                color: #04a635;
            }

            .mode-test {
                color: #ca0003;
            }
        }

        .btn {
            position: absolute;
            right: 30px;
            top: 0;

            .text {
                color: #ffffff;
                font-size: 14px;
            }
        }

        .test-btn {
            position: absolute;
            right: 30px;
            top: 56px;
            display: flex;
            align-items: center;

            .label {
                width: 98px;
                text-align: right;
                font-size: 14px;
            }

            .input {
                width: 100px;
                line-height: 32px;
            }

            .el-input__inner {
                background-color: #222;
                color: #f1f1f1;
                border: 1px solid #666;
            }

            .start,
            .prepare {
                margin-left: 16px;
            }
        }

        .test-lable {
            position: absolute;
            right: 30px;
            top: 102px;

            .text {
                color: #ffffff;
                font-size: 14px;
            }
        }
    }

    .alarm {
        position: absolute;
        top: 100px;
        min-height: 40px;
        left: 50%;
        transform: translateX(-50%);
        background: #5a1212;
        border: solid 2px #ff0000;
        box-shadow: 0px 0px 6px #ff0000;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 50px 0 20px;
        color: #fff;
        animation: alarmShadow 2s infinite alternate;

        .alarm-icon {
            margin-right: 10px;
            width: 26px;
            height: 26px;
        }

        .alarm-close {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            padding: 0 10px;
            font-size: 22px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
    }

    .footer {
        position: absolute;
        bottom: 0;
        left: 30px;
        right: 30px;
        line-height: 50px;

        .date {
            float: right;
            color: #e1e1e1;
            font-size: 16px;
        }
    }

    .pagination {
        text-align: right;
    }
}

.table-error-btn {
    color: #f56c6c;
}
</style>
